<template>
    <!-- 过程流转卡 -->
    <div class="QrCode">
        <MyDialog :model-value="true" :type="DialogType.C1" title="在用绳 - 二维码" @close="onClose">
            <div class="wrap" v-if="thisData">
                <qrcode-vue :value="thisData.code" :size="190" foreground="#000000" level="H" :title="thisData.code" />
                <div class="info">
                    <div class="text">钢丝绳编码：{{ thisData.code }}</div>
                    <div class="text">钢丝绳名称：{{ thisData.name }}</div>
                    <div class="text">矿山名称：{{ thisData.department_Name }}</div>
                    <div class="text">安装地点：{{ thisData.installAddressName }}</div>
                    <div class="text">钢丝绳类型：{{ thisData.wireropeTypeName }}</div>
                    <div class="text">安装日期：{{ Gx.YMD(thisData.installDate) }}</div>
                </div>
            </div>

            <template #footer>
                <el-button type="primary" @click="print">打印</el-button>
            </template>
        </MyDialog>
    </div>
</template>

<script lang="ts" setup>
import Gx from "@/gx/Gx";
import QrcodeVue from "qrcode.vue";
import { DialogType } from "@/_gx/TsEnums";

//创建出路由对象
const router = useRouter();

const thisData = ref();

//初始化
const Init = (data) => {
    thisData.value = data;
};

const print = () => {
    let routeUrl = router.resolve({ path: "/WireQrCodeTemplate" });
    window.open(routeUrl.href + "?id=" + thisData.value.autoID, "_blank");
};

//关闭
const onClose = () => {
    emits("close", false);
};

//向上抛出的事件与方法
const emits = defineEmits(["close"]);
defineExpose({ Init });
</script>

<style scoped lang="scss">
.wrap {
    background: #f2f2ff;
    display: flex;
    align-content: center;
    padding: 20px;
    margin-bottom: 20px;

    .info {
        display: flex;
        flex-direction: column;
        margin-left: 30px;

        .text {
            flex: 1;
            display: flex;
            align-items: center;
        }
    }
}
</style>
